﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户中心</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/vue/vue.min.js"></script>
<script src="js/jquery/jquery.min.js"></script>
<script src="js/laypage/laypage.js" charset="utf-8"></script>
<script src="js/layer/layer.js" charset="utf-8"></script>
</head>
<body>

	<div id="app" class="container">
		<form class="form-inline bg-danger" role="form">
			查询条件：
			<div class="form-group">
				<label class="sr-only" for="order_name">商品名称</label> <input
					type="text" class="form-control" name="order_name" id="order_name"
					placeholder="商品名称">
			</div>
			<button type="button" id="findOrder" class="btn btn-success">查询商品</button>
			<button type="button" id="addorderBtn" class="btn btn-danger">增加商品</button>
		<div class="welcome">欢迎登陆</div>
		</form>

		<div class="table-responsive">
			<table class="table">
				<thead>
					<tr class="success">
						<td>序号</td>
						<td>商品名称</td>
						<td>商品价格</td>
						<td>商品日期</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr class="active" v-for="(item,index) in result">
						<td>{{index+1}}</td>
						<td>{{item.order_name}}</td>
						<td>{{item.order_price}}</td>
						<td>{{item.order_date}}</td>
						<td><a href="#" @click="editEvent(item.order_id)">修改</a> <a
							href="#" @click="delEvent(item.order_id)">删除</a></td>
					    
					</tr>
				</tbody>
			</table>
			<div id="pagenav"></div>
		</div>
	</div>
	<script>
		var app = new Vue({
			el : '#app',
			data : {
				result : []
			}
		});

		//查询用户数据
		var getOrderPageList = function(curr) {

			$.ajax({
				type : "GET",
				dataType : "json",
				url : "/order/getcond",
				data : {
					pageNum : curr || 1,
					pageSize : 8,
					order_name : $("#order_name").val()
				//向服务端传的参数，此处只是演示
				},
				success : function(msg) {
					if (msg == -1) {
						location.href = 'index.html';
					}
					app.result = msg.result;
					laypage({
						cont : 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
						pages : msg.totalPage, //总页数
						first : true,
						last : true,
						curr : curr || 1, //当前页
						jump : function(obj, first) { //触发分页后的回调
							if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
								getOrderPageList(obj.curr);
							}
						}
					});
				}
			});
		}
		getOrderPageList();
		//查询用户事件
		$('#findOrder').on('click', function() {
			getOrderPageList();
		});

		//增加用户事件
		$('#addorderBtn').on('click', function() {
			layer.open({
				type : 2,
				title : '添加商品',
				fix : false,
				maxmin : true,
				shadeClose : true,
				area : [ '1100px', '600px' ],
				content : 'order_add.html',
				end : function() {
					getOrderPageList();
				}
			});
		});

		//编辑用户事件
		var editEvent = function(order_id) {
			layer.open({
				type : 2,
				title : '修改用户',
				fix : false,
				maxmin : true,
				shadeClose : true,
				area : [ '1100px', '600px' ],
				content : '/order/editpage?order_id=' + order_id,
				end : function() {
					getOrderPageList();
				}
			});
		}

		//删除用户事件
		var delEvent = function(order_id) {
			//询问框
			layer.confirm('您确定要删除么？', {
				btn : [ '是', '否' ]
			//按钮
			}, function() {
				//是
				$.ajax({
					type : "GET",
					dataType : "json",
					url : "/order/del",
					data : {
						order_id : order_id
					},
					success : function(msg) {
						getOrderPageList();
						layer.msg('已经成功删除记录' + order_id, {
							icon : 5
						});
					}
				});
			}, function() {
				//否
			});
		}

	  /*$(document).ready(function(){
			$.ajax({
				url="/login",
				type="get",
				success:function(data){
					$(".welcome")[0].innerHtml=data+"欢迎您！";
				},
				error:function(data){
					alert("系统出错");
				}
			})
		}) */
	</script>
</body>
</html>